<style lang="scss">
.cus-input__icon {
  line-height: 32px;
}
.cus-input--focus-edit {
  .el-input__inner:not(:focus) {
    box-shadow: none;
  }
  //&:focus {
  //  .el-input__inner {
  //    box-shadow: 0 0 0 1px var(--el-input-focus-border-color,var(--el-border-color-base)) inset;
  //  }
  //}
}
</style>

<template>
  <template v-if="inited">
    <!--    {{widgetConfig.enums}}-->
<!--    {{state.OPT.widgetConfig}}-->
<!--    {{typeof state.value}}-->
    <template v-if="state.OPT.widgetConfig">
      <template v-if="state.OPT.widgetConfig.type === 'number' ">
        <el-input
            :class="getCls()"
            v-model.number="state.value"
            v-bind="state.OPT.widgetConfig"
            @change="onNumberChange"
        ></el-input>
      </template>
      <template v-else>
        <el-input
            :class="getCls()"
            v-model="state.value"
            v-bind="state.OPT.widgetConfig"
            v-on="listeners"
            @focus="onfocus"
            @blur="onblur"
        >
          <template v-if="state.OPT.widgetConfig.append" #append>
            <div v-html="state.OPT.widgetConfig.append"></div>
          </template>
          <template v-if="state.OPT.widgetConfig.prefixIcon" #prefix>
            <i class="cus-input__icon" :class="state.OPT.widgetConfig.prefixIcon"></i>
          </template>
          <template v-if="state.OPT.widgetConfig.suffixIcon" #suffix>
            <i class="cus-input__icon" :class="state.OPT.widgetConfig.suffixIcon"></i>
          </template>
        </el-input>
      </template>
    </template>
  </template>
</template>

<script>
import {CustomRenderControlMixin, defineCustomRender} from "@/plugins/form-render/utils/index.js";
import {createAbleProp, createBaseCusCONFIG} from "@/plugins/z-frame/CusBaseEditor";
import {QuickNumber, setPROPS} from "@/hooks/props";


export default {
  name: 'CusInput',
  mixins: [
    CustomRenderControlMixin
  ],
  CUS_TITLE: '输入',
  CUS_EDITOR: function () {
    return {
      props: {
        ...createBaseCusCONFIG(),
        clearable: createAbleProp({
          label: '清除'
        }),
        type: {
          type: 'string',
          ui: {
            label: '类型',
          },
          noticeIframe: `https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types`
        },
        maxlength: {
          type: 'number',
          ui: {
            label: '最大长度',
            widgetConfig: {
              type: 'number'
            },
            notice: ''
          },
          rules: {
            type: 'any'
          }
        },
        showWordLimit: createAbleProp({
          label: '计数'
        }),
        // rows: {
        //   type: 'number',
        //   ui: {
        //     label: '行数',
        //   }
        // },
        rows: setPROPS(
            QuickNumber() ?? {},
            {
              ui: {
                label: '行数',
              }
            }
        ),
        prefixIcon: {
          type: 'string',
          ui: {
            label: '前面icon',
            widget: 'CusIconList',
            widgetConfig: {
              placement: 'top-start'
            }
          }
        },
        suffixIcon: {
          type: 'string',
          ui: {
            label: '后面icon',
            widget: 'CusIconList',
            widgetConfig: {
              placement: 'top-start'
            }
          }
        }
      }
    }
  },
  setup(props, ctx) {
    let { data, methods, listeners, init, widgetConfig2, initDefaultVal } = defineCustomRender(props, ctx, {

    })
    // console.log(widgetConfig2)
    let state = data({

    })
    init(props);
    initDefaultVal();

    // let widgetConfig = props?.ui?.widgetConfig ?? {}

    function onNumberChange(v) {
      // console.log(v)
      let val = parseInt(v)
      methods.onChange(val)
    }

    function getCls() {
      return {
        ['cus-input--' +  (widgetConfig2.mode ? widgetConfig2.mode : '') ]: 1
      }
    }

    function onfocus() {

    }

    function onblur() {

    }

    return {
      state,
      getCls,
      onfocus,
      onblur,
      onNumberChange,
      widgetConfig: widgetConfig2,
      methods,
      listeners,
    }
  },
}
</script>

